import React, { Component } from 'react';
import { Form, Checkbox, Row, Col, Affix, Button, Popover, Icon } from 'antd';
import { messages } from 'share/common';
import priceTaxRuleService from './price-tax-seperation-service';
import 'styles/request-and-expense-settings/price-tax-rule.scss';
import Info from "components/info";

@Form.create()
class NewVatInvoice extends Component {
  constructor(props){
    super(props);
    this.state = {
      submitLoading: false,
      receiptTypeList: this.props.receiptTypeList
    }
  }
  handleSave = () => {
    const { form: { validateFieldsAndScroll }, receiptTypeList } = this.props;
    validateFieldsAndScroll(async (errors, values) => {
      if (!errors) {
        receiptTypeList.map(item => {
          item.enabled = values.receipts.includes(item.receiptTypeNo);
          return item;
        });
        this.setState({ submitLoading: true });
        try {
          await priceTaxRuleService.setDeductibleConfig({ receiptTypeList, configFlag: true });
          this.props.close(true);
        }
        catch (e) {

        }
        this.setState({ submitLoading: false });
      }
    });
  };

  handleCancel = () => {
    this.props.close(false);
  };

  componentDidMount() {
    const { receiptTypeList } = this.state;
    const obj = {
      '14': messages('expense-4.key25')/*可抵扣条件：发票票面显示“通行费”字样（即 通行费标志：是）、税率栏不等于空/“零税率”/“免征”*/,
      '10': messages('expense-4.key33')/*可抵扣条件：开票日期不早于2019年4月1日、税收分类编码包含“*运输服务*”的国内旅客运输服务的发票（注：货物运输不可抵扣）*/,
      '140': messages('expense-4.key27')/*可抵扣条件：开票日期不早于2019年4月1日、票面的旅客身份信息完整（身份证号+姓名）、出发地和目的地均为中国境内地区*/,
      '150': messages('expense-4.key27')/*可抵扣条件：开票日期不早于2019年4月1日、票面的旅客身份信息完整（身份证号+姓名）、出发地和目的地均为中国境内地区*/,
      '160': messages('expense-4.key27')/*可抵扣条件：开票日期不早于2019年4月1日、票面的旅客身份信息完整（身份证号+姓名）、出发地和目的地均为中国境内地区*/
    };
    receiptTypeList.map(item => {
      Object.keys(obj).includes(item.receiptTypeNo) && (item.desc = obj[item.receiptTypeNo])
    });
    this.setState({ receiptTypeList });
  }

  render() {
    const { form: { getFieldDecorator }, receiptTypeList, readOnly } = this.props;
    const { submitLoading } = this.state;
    return (
      <section className="new-vat-invoice">
        <Info
          paragraph
          attributes={[{title: messages('expense-4.key18')/*说明*/, dataIndex: 'explain', span: 24, widthFix: false}]}
          dataSource={{explain: messages('expense-4.key28')/*下述勾选发票类型的发票，会被打上“可抵扣”标签*/}}
        />
        <Form>
          <Form.Item>
            {
              getFieldDecorator('receipts', {
                initialValue: receiptTypeList.filter(item => item.enabled)
                  .map(item => item.receiptTypeNo),
              })(
                <Checkbox.Group style={{ width: '100%' }}>
                  <Row>
                    {
                      receiptTypeList.map(item =>
                        <Col span={24} className="new-vat-invoice__col">
                          <Checkbox value={item.receiptTypeNo} clssName="new-vat-invoice__check">{item.receiptType}
                            {
                              item.desc &&
                              <Popover
                                getPopupContainer={triggerNode => triggerNode.parentNode}
                                content={item.desc}
                                placement="rightTop"
                              >
                                <Icon type="info-circle-o" style={{ marginLeft: 5 }}/>
                              </Popover>
                            }
                          </Checkbox>
                          {
                            ['140', '150', '160'].includes(item.receiptTypeNo) &&
                            <section style={{ color: 'rgb(139, 147, 167)' }}>
                              {messages('expense-4.key29')/*注：勾选此发票类型可抵扣，请务必到【发票设置-发票管控-发票控件字段设置】页面配置此发票类型“人员信息完整性”字段显示且必填，否则此类型仍不可抵扣*/}
                            </section>
                          }
                        </Col>
                      )
                    }
                  </Row>
                </Checkbox.Group>
              )
            }
          </Form.Item>
          <Affix offsetBottom={0} className="slide-footer">
            <Button
              type="primary"
              loading={submitLoading}
              disabled={readOnly}
              htmlType="submit"
              onClick={this.handleSave}
            >
              {messages('common.save')/*保存*/}
            </Button>
            <Button
              loading={submitLoading}
              onClick={this.handleCancel}
              disabled={readOnly}
              className="new-unit-cancel"
            >
              {messages('common.cancel')/*取消*/}
            </Button>
          </Affix>
        </Form>
      </section>
    );
  }
}

export default NewVatInvoice;
